
<template>
  <header class="header">
    <h1>todos</h1>
    <input 
    @keydown.enter="addEvent"
    v-model="content"
    class="new-todo" 
    placeholder="What needs to be done?" 
    autofocus />
  </header>
</template>

<script setup>
import { ref } from 'vue';

const content = ref('')
const props = defineProps(['list'])
// console.log(props);
const emits = defineEmits(['addEvent'])
const addEvent = ()=> {
  // console.log(content.value);
  console.log(props.list.length);
   emits('addHandel',{
    id:props.list.length+1,
    name:content.value,
    done:false
  })
  content.value=''
}
</script>
